<template>

    <div class="filter-container" style="padding-top: 0">

        <el-form
                :inline="true"
                :model="formData"
                label-position="right"
                size="small"
                class="filter-form-inline"
        >
            <el-row :gutter="20" style="margin-left: 0px; margin-right: 0px">

                <el-col :span="6">
                    <el-form-item label="业务类型" style="width: 100%">
                        <el-select
                                v-model="formData.followUpType"
                                clearable
                                style="width: 100%"
                                placeholder="请选择业务类型"
                                @change="listSearch"
                        >
                            <el-option label="线索跟进" value="1"/>
                            <el-option label="客户跟进" value="2"/>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="产品信息" style="width: 100%">
                        <el-select
                                style="width: 100%"
                                v-model="formData.productId"
                                :loading="loading"
                                :remote-method="remoteMethod"
                                clearable
                                filterable
                                placeholder="请选择产品"
                                remote
                                reserve-keyword
                                @change="listSearch"
                        >
                            <el-option
                                    v-for="item in products"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>

                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="跟进职员" style="width: 100%">
                        <el-select
                                v-model="formData.headId"
                                clearable
                                style="width: 100%"
                                placeholder="请选择职员"
                                @change="listSearch"
                        >
                            <el-option
                                    v-for="item in headOptions"
                                    :key="item.id"
                                    :label="item.realName"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col
                        :span="2"
                >
                    <el-form-item style="width: 100%">
                        <more-search-btn v-model:is-more="visible"/>
                    </el-form-item>
                </el-col>


                <el-col :span="4">
                    <el-form-item style="width: 100%">
                        <el-button
                                class="border-btn"
                                @click="reset"
                        >重置</el-button>
                        <el-button
                                type="primary"
                                class="main-btn"
                                @click="listSearch"
                        >搜索</el-button>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row v-if="visible" :gutter="20" style="margin-left: 0px; margin-right: 0px">

                <el-col
                        :span="6"
                >
                    <el-form-item
                            label="关联营销任务"
                            style="width: 100%;"
                    >
                        <el-input
                                v-model="formData.taskNo"
                                clearable
                                placeholder="输入任务编号"
                        />
                    </el-form-item>
                </el-col>

                <el-col
                        :span="6"
                >
                    <el-form-item
                            label="跟进时间"
                            style="width: 100%"
                    >
                        <date-range-picker
                                v-model:date="formData.date"
                                clearable
                                style="width: 100%;"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="listSearch"
                        />
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

    </div>

    <table-view :data="tableData" :visible="visible" @row-click="rowClick">

        <el-table-column
                align="center"
                header-align="center"
                label="跟进时间"
                :min-width="150"
        >
            <template #default="scope">
                <span>{{dateFormat('yyyy-mm-dd HH:MM',scope.row.createdAt)}}</span>
            </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                prop="headName"
                label="跟进职员"
                :min-width="100"
        />
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                label="业务类型"
                :min-width="150"
        >
            <template #default="scope">
                <span>{{scope.row.followUpType == 1 ? '线索跟进' : '客户跟进'}}</span>
            </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                label="线索/客户名称"
                :min-width="150"
        >
            <template #default="scope">
                <span>{{ scope.row.objectName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                header-align="center"
                label="产品信息"
                :min-width="150"
                show-overflow-tooltip
        >
            <template #default="scope">
                <span v-if="scope.row.followUpType == 2">{{ getProductName(scope.row) }}</span>
            </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                label="跟进形式"
                :min-width="100"
        >
            <template #default="{row}">
                {{getLabel('visit_form',row.visitForm)}}
            </template>
        </el-table-column>

    </table-view>

    <Pagination
            v-model:page="formData.page"
            v-model:limit="formData.pageSize"
            style="display: flex; justify-content: flex-end"
            :total="total"
            @pagination="getList"
    />

    <detail-drawer
            ref="detailDrawer"
            :size-width="1000"
            custom-title
    >
        <template #title>

            <span>跟进记录详情</span>

        </template>
        <template #contents>

            <recordDetail :datas="selectData"/>

        </template>
    </detail-drawer>

</template>

<script>
    import { getProductName } from "../../../../../../../../utils/commonFun";
    import { crmStore } from "../../../../../../store";
    import { defineComponent, defineAsyncComponent, reactive, toRefs, ref, onMounted, getCurrentInstance, inject } from 'vue'
    export default defineComponent({
        name: "recordView",
        components:{
            recordDetail:defineAsyncComponent(
                ()=>import('../../modules/recordDetail.vue')
            )
        },
        setup(){
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const headOptions = crmStore.getters['company/getHeadOptions']

            var data = reactive({
                visible:false,
                tableData:[],
                formData:{
                    page:1,
                    pageSize:20,
                    taskNo:'',
                    headId:'',
                    productId:'',
                    followUpType:'',
                    date:[]
                },
                total:0,
                loading:false,
                products:[],
                detailDrawer:null,
                selectData:{},
            })

            const listSearch = () => {
                data.formData.page = 1
                getList()
            }

            const reset = () => {
                data.formData = {
                    page:1,
                    pageSize:20,
                    taskNo:'',
                    headId:'',
                    productId:'',
                    followUpType:'',
                    date:[]
                }

                getList()
            }

            const getList = () => {
                let a = {...data.formData}
                a.headId = Number(a.headId)
                a.productId = Number(a.productId)
                if (a.date && a.date.length) {
                    a.startTime = a.date[0]
                    a.endTime = a.date[1]
                }
                api.task.TASK_FOLLOW_UP_LIST(a).then(res=>{
                    if (!res.code){
                        data.tableData = res.data.list || []
                        data.total = res.data.total
                    }else{
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const remoteMethod = (query) => {
                data.products = []
                data.loading = true

                if (query) {
                    const pam = {
                        keyWord: query,
                    }
                    api.common.GET_PRODUCT_LIST(pam).then((res) => {
                        if (!res.code && res.data) {
                            res.data.list.forEach(a => {
                                a.name = getProductName(a)
                            })
                            data.products = res.data.list

                        } else {
                            currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                        }
                        data.loading = false
                    })
                } else {
                    data.loading = false
                }
            }

            const rowClick = (row,column) => {
                if (column.label === '操作') return
                data.selectData = row
                data.detailDrawer.open()
            }

            onMounted(() => {
                getList()
            })

            return{
                ...toRefs(data),
                headOptions,

                listSearch,
                rowClick,
                getList,
                remoteMethod,
                reset,
            }
        }
    })
</script>

<style scoped>

</style>
